<template>
  <div class="container">
    <mt-header fixed title="会谈信息">
      <a slot="right" @click="close">
        关闭
      </a>
    </mt-header>
    <div class="header">
      <h2>会谈报告</h2>
      <div class="meeting-time">
        <span class="time-text" v-text="'会谈时间：'+formateDate(meeting.meetingTime)"></span>
        <span class="status-text" v-text="'会谈方式：'+meeting.meetingType"></span>
      </div>
    </div>
    <div id="wrapper" ref="scrollWrap">
      <div class="scroller" ref="scroller">
        <div class="info">
          <div class="cell title">
            <label>主要信息</label>
          </div>
          <div class="cell">
            <label>负责人</label>
            <span>{{meeting.owner}}</span>
          </div>
          <div class="cell">
            <label>参会领导</label>
            <span>{{meeting.attendee}}</span>
          </div>
          <div class="cell">
            <label>来访人员</label>
            <span>{{meeting.attendeeMerchant}}</span>
          </div>

          <div class="cell">
            <label>其他人员</label>
            <span v-text="meeting.attendeeOther" ></span>
          </div>
          <div class="cell">
            <label>时间计划</label>
            <span v-text="meeting.scheduleDesc"></span>
          </div>
          <div class="cell">
            <label>礼品</label>
            <span v-text="meeting.gift"></span>
          </div>
          <div class="cell">
            <label>会谈纪要</label>
          </div>
          <div class="meeting-content" v-html="meeting.meetingContent">
          </div>
          <div class="cell">
            <label>项目需求</label>
          </div>
          <div class="meeting-content" v-html="meeting.preferential"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import BScroll from 'better-scroll'
  import { Indicator } from 'mint-ui';
  import {getStyle,getDeviceRatio} from '../../base/js/util.js'
  import {api} from "../../base/js/api.js"
  import moment from 'moment'
  /*获取当前缩放比*/
  const DEVICE_RATIO=getDeviceRatio();
  /**
   *
   * @param threshold 触发事件的阀值，即滑动多少距离触发
   * @param stop 下拉刷新后回滚
   */

  /*下拉配置*/
  const DOWN_CONFIG={
    threshold:20*DEVICE_RATIO,
    stop: 0*DEVICE_RATIO
  }
  /*上拉配置*/
  const UP_CONFIG={
    threshold:-20*DEVICE_RATIO,
  }
  export default {
    data () {
      return {
      }
    },
    props:['meeting'],
    mounted(){
      const {scroller, scrollWrap, scrollList} = this.$refs;
      this.scroller = new BScroll(scrollWrap, {
        click: true,
        probeType: 3,
        pullDownRefresh: DOWN_CONFIG,
        pullUpLoad: UP_CONFIG
      })
    },
    methods:{
      close(){
        this.$emit('ievent');
      },
      formateDate(date) {
        return moment(date).format('YYYY-MM-DD')
      }
    },
    deactivated () {
      this.$destroy()
    }
  }
</script>
<style scoped lang="scss">
  @import '../../base/css/_base';
  .container{
    height: 100%;
    position: relative;
    .header{
      background: #26A2FF;
      min-height: 60px;
      display: block;
      padding: 20px;
      position: relative;
      h2{
        color: #fff;
      }
      .meeting-time{
        @include flex-left;
        margin-top: 20px;
        color: #fff;
        .time-text{
          flex: 1;
        }
        .status-text {

        }
      }
    }
    .info{
      .cell{
        border-bottom: 0.5px solid #cecece;
        background-color: #fff;
        label{
          display: inline-block;
          @include fz(5px);
          color: #80848f;
          padding: 10px 0 10px 20px;
          width: 100px;
        }
        span {
          display: inline-block;
          @include fz(4px);
        }
        &.title {
          background: #E6E6E6;
        }
      }
      .default {
        background-color: #E6E6E6;
        border-bottom: 0.5px solid #fff;
        .right-label{
          border-left: 1px solid #fff;
        }
        span {
        }
      }
    }
  }

  #wrapper{
    position: relative;
    width: 100%;
    height: 80%;
    overflow: hidden;
    background:#F0EFF5;
    .scroller{
      position: absolute;
      width: 100%;
      &.topPadding{
        top:1rem;
      }
      z-index: 10;
    }
  }

  .close-btn{
    position: absolute;
    padding:20px;
    top: -10px;
    right:0px;
    color: #80848f;
  }

  .meeting-content{
    background: #fff;
    min-height: 100px;
    padding: 20px;
    border-bottom: 0.5px solid #cecece;
  }
</style>
